<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<view :class="['wrap',{'dark':theme=='dark'}]">
		

			<!-- 新币申购轮播图-->
			<view class="wrapc">
				<u-swiper  name="img" :list="list"  height="350" border-radius="10" bg-color="rgba(63, 81, 181, 0);"></u-swiper>
			</view>

			<!-- 切换选项 -->
			<view class="wrapcc">
				<u-tabs :list="lists" :is-scroll="false" bg-color="" active-color="#FFF" inactive-color="#c1c6d2"
					:current="current" @change="change"></u-tabs>
			</view>

			<!-- 当有认购项目发布的时候展示的模板样式 点击参与认购，弹出下拉窗口类似法币交易那个下拉窗口一样输入之后提交参与-->
			<view v-show="current==0" v-for="(item,index) in dataList" :key="item.id" :class="['',{'dark':theme=='dark'}]">
				<view :class="['tool-card',{'darksss':theme=='dark'}]">
					<u-row gutter="16">

						<!-- 发行项目 -->

						<u-col span="9">
							<u-gap height="30" bg-color=""></u-gap>
							<view class="bgtxt bgtxtp">{{item.title}}</view>
						</u-col>
						

						<u-col span="3">
							<u-gap height="30" bg-color=""></u-gap>
							<view class="bgtxt ">
							<image class="avatar" :src="item.img" mode=""></image>
							</view>
						</u-col>
						<!-- 加一条线 -->
						<u-line color="#5559691f"></u-line>
						
						
						
						<!-- 间隔槽 -->
						<u-gap height="30" bg-color=""></u-gap>

						<!-- 预计收益 -->
						<u-col span="9">
							<view class="bgtxt">{{$t('bico.W356')}}</view>
						</u-col>
						
						<u-col span="3">
							<view class="bgtxtoP">{{item.oddsWinning}}% USDT</view>
						</u-col>
						<!-- 最低数量 -->
						<u-col span="9">
							<view class="bgtxt">{{$t('bico.W357')}}</view>
						</u-col>
						
						<u-col span="3">
							<view class="bgtxtoP">{{item.minPrice}} {{item.currency}}</view>
						</u-col>
						
						<!-- 发行数量 -->
						<u-col span="9">
							<view class="bgtxt">{{$t('bico.W355')}}</view>
						</u-col>
						
						<u-col span="3">
							<view class="bgtxtoP">{{item.issuanceCount}} {{item.currency}}</view>
						</u-col>
						
						<!-- 结束时间 -->
						<u-col span="3">
							<view class="bgtxt">{{$t('bico.W358')}}</view>
						</u-col>
						<u-col span="3">
						</u-col>
						<u-col span="1">
						</u-col>
						<u-col span="5">
							<view class="bgtxtoP">{{item.endTime}}</view>
						</u-col>

					</u-row>
					<u-line color="#5559691f"></u-line>
					<u-gap height="30" bg-color=""></u-gap>
					<view class="kgb">
						<u-button size="default" type="primary" @click="showPopup(item)">{{$t('bico.W359')}}</u-button>
					</view>
					<u-gap height="45" bg-color=""></u-gap>
				</view>
				<u-gap height="30" bg-color=""></u-gap>
				
			</view>
			
			
			
			
			
			<!-- 参与项目认购弹窗 样式 美化 -->
			<view :class="['',{'darksss':theme=='dark'}]">
			<u-popup v-model="show" mode="center">
				<view :class="['popopview',{'darksss':theme=='dark'}]">
					<u-row gutter="16">
						<!-- 认购项目 -->
						<u-col span="12">
							<u-gap height="30" bg-color=""></u-gap>
							<view class="bgtxtrt bgtxtp">{{detail.title}}</view>
						</u-col>
						
						<u-line color="#5559691f"></u-line>
						
					</u-row>
					
					<!-- 完成进度 -->
					<u-row gutter="16">
						<u-col span="7">
							<view class="bgtxtrt">{{$t('bico.W363')}}</view>
						</u-col>
						
						<u-col span="4">
							<view class="bgtxtrt bgtxtoP">{{usedTotalR}} %</view>
						</u-col>
					</u-row>
					
					<!-- 支付币种 -->
					<!-- <u-row gutter="16">
						<u-col span="3">
							<view class="bgtxtrt">{{$t('bico.W360')}}</view>
						</u-col>
						<u-col span="3">
							<view class="bgtxtrt"></view>
						</u-col>
						
						<u-col span="3">
							<view class="bgtxtrt"></view>
						</u-col>
						
						<u-col span="3">
							<view class="bgtxtrt">{{detail.currency}}</view>
						</u-col>
					</u-row> -->
					
					<u-row gutter="16">
						<!-- 最低申购 -->
						<u-col span="7">
							<view class="bgtxtrt">{{$t('bico.W362')}}</view>
						</u-col>
						
						<u-col span="4">
							<view class="bgtxtrt bgtxtoP">{{detail.minPrice}} {{detail.currency}}</view>
						</u-col>
					</u-row>

					<!-- 发行数量 -->
					<u-row gutter="16">
						<u-col span="7">
							<view class="bgtxtrt">{{$t('bico.W361')}}</view>
						</u-col>
						
						<u-col span="4">
							<view class="bgtxtrt bgtxtoP">{{detail.issuanceCount}} {{detail.currency}}</view>
						</u-col>
					</u-row>
					
					<u-row gutter="16">
						<!-- 剩余数量 -->
						<u-col span="7">
							<view class="bgtxtrt">{{$t('bico.W364')}}</view>
						</u-col>
						
						<u-col span="4">
							<view class="bgtxtrt bgtxtoP">{{ usedTotal}} {{detail.currency}}</view>
						</u-col>
					</u-row>
					<u-row gutter="16">
						<!-- 结束时间 -->
						<u-col span="3">
							<view class="bgtxtrt">{{$t('bico.W365')}}</view>
						</u-col>
						<u-col span="1">
							<view class="bgtxtrt"></view>
						</u-col>
						<u-col span="1">
							<view class="bgtxtrt"></view>
						</u-col>
						<u-col span="6">
							<view class="bgtxtrt bgtxtoP">{{detail.endTime}}</view>
						</u-col>
					</u-row>
					
					<!-- 输入数量 全部按钮 修改靠右排列-->
					
					<view :class="['input',{'darksss':theme=='dark'}]">
						<view><input cursor-spacing="0"
								:adjust-position="false" type="digit"
								v-model="price"
								:placeholder="$t('bico.W367')" :class="['uni-input',{'darksss':theme=='dark'}]">
						</view>
						<view>
							<text class="i cny"></text>
							  <text @click="allBuy" class="i all bgtxtoP">{{$t('bico.W366')}}</text>
						</view>
					</view>
					
					<!-- 钱包余额 -->
					<view class="popopview2">
						<u-row gutter="16">
							<u-col span="5">
								<view class="bgtxtrt">{{$t('bico.W368')}}</view>
							</u-col>
							
							<u-col span="6">
								<view class="bgtxtrt bgtxtoP">{{myWallet.usedPrice}} {{myWallet.type}}</view>
							</u-col>
						</u-row>
					</view>
					
					<!-- 参与数量 沿用 96% 2vw 窄边框 苹果13 拉伸款比自适应-->
					<view class="popopview2">
						<u-row gutter="16">
							<u-col span="5">
								<view class="bgtxtrt">{{$t('bico.W378')}}</view>
							</u-col>
							
							<u-col span="6">
								<view class="bgtxtrt bgtxtoP">{{estimatedIncome}} {{detail.currency}}</view>
							</u-col>
						</u-row>
					</view>
					
					<view class="kgb">
						<!-- 加一条线 -->
						<u-line color="#5559691f"></u-line>
						<!-- 间隔槽 -->
						<u-gap height="60" bg-color=""></u-gap>
						<u-button size="default" type="primary" @click="submit">{{$t('bico.W370')}}</u-button>
					</view>
					
				</view>
			</u-popup>
			</view>
			
			
			
			
			
			
			
			
			
			

			<view v-show="current==1" v-for="(item,index) in dataList2" :key="item.id" :class="['',{'dark':theme=='dark'}]">
				<!-- 当参与项目认购之后的样式展示 进行中的样式显示到 导航 正在参与 里面去-->

				<view :class="['tool-card',{'darksss':theme=='dark'}]">
					<u-row gutter="16">

						<!-- 参与项目 -->
						<u-col span="9">
							<u-gap height="30" bg-color=""></u-gap>
							<view class="bgtxt bgtxtp">{{item.instrument}}</view>
						</u-col>

						<u-col span="3">
							<u-gap height="30" bg-color=""></u-gap>
							<view class="bgtxt">
								<image class="avatar" :src="item.img" mode=""></image>
							</view>
						</u-col>
						<!-- 加一条线 -->
						<u-line color="#5559691f"></u-line>
						<!-- 间隔槽 -->
						<u-gap height="30" bg-color=""></u-gap>
						<!-- 参与数量 -->
						<u-col span="9">
							<view class="bgtxt">{{$t('bico.W372')}}</view>
						</u-col>
						<u-col span="3">
							<view class="bgtxtoP">{{item.sum}} USDT</view>
						</u-col>
						<!-- 预计收益 -->
						<u-col span="8">
							<view class="bgtxt">{{$t('bico.W373')}}</view>
						</u-col>
						<u-col span="4">
							<view class="bgtxtoP">{{Number(item.earningsSum).toFixed(2)}} USDT</view>
						</u-col>
						<!-- 参与时间 -->
						<u-col span="7">
							<view class="bgtxt">{{$t('bico.W374')}}</view>
						</u-col>
						
						<u-col span="5">
							<view class="bgtxtoP">{{item.createtime}}</view>
						</u-col>
					</u-row>
					
					<view class="kgb">
						<u-line color="#5559691f"></u-line>
						<u-gap height="30" bg-color=""></u-gap>
						<u-button size="default" type="warning">{{$t('bico.W375')}}</u-button>
						<u-gap height="45" bg-color=""></u-gap>
					</view>
				</view>
				<u-gap height="30" bg-color=""></u-gap>
			</view>
			
			
			<view v-show="current==2" v-for="(item,index) in dataList3" :key="item.id">
				<!-- 当参与项目认购之后中签后结算的样式展示 已经结束的样式显示模板 显示到导航分组 已经结束 里面去-->
				<view :class="['tool-card',{'darksss':theme=='dark'}]">
					<u-row gutter="16">

						<!-- 发行项目 -->
						<u-col span="9">
							<u-gap height="30" bg-color=""></u-gap>
							<view class="bgtxt  bgtxtp">{{item.instrument}}</view>
						</u-col>
						<u-col span="3">
							<u-gap height="30" bg-color=""></u-gap>
							<view class="bgtxt">
								<image class="avatar" :src="item.img" mode=""></image>
							</view>
						</u-col>
						<!-- 加一条线 -->
						<u-line color="#5559691f"></u-line>
						<!-- 间隔槽 -->
						
						<!-- 参与数量 -->
						<u-col span="7">
							<view class="bgtxt">{{$t('bico.W378')}}</view>
						</u-col>
						<u-col span="5">
							<view class="bgtxtoP">{{item.sum}} USDT</view>
						</u-col>
						<!-- 获得收益 -->
						<u-col span="7">
							<view class="bgtxt">{{$t('bico.W379')}}</view>
						</u-col>
						<u-col span="5">
							<view class="bgtxtoP">{{Number(item.earningsSum).toFixed(2)}} USDT</view>
						</u-col>
						
						<u-gap height="30" bg-color=""></u-gap>
						<!-- 发行数量 -->
						<u-col span="7">
							<view class="bgtxt">{{$t('bico.W377')}}</view>
						</u-col>
						<u-col span="5">
							<view class="bgtxtoP">{{Number(item.managementSum).toFixed(2)}} USDT</view>
						</u-col>
						
						
						<!-- 参与时间 -->
						<u-col span="7">
							<view class="bgtxt">{{$t('bico.W374')}}</view>
						</u-col>
						<u-col span="5">
							<view class="bgtxtoP">{{item.createtime}}</view>
						</u-col>
						<!-- 结束时间 -->
						<u-col span="7">
							<view class="bgtxt">{{$t('bico.W365')}}</view>
						</u-col>
						<u-col span="5">
							<view class="bgtxtoP">{{item.periodTime}}</view>
						</u-col>
					</u-row>
					
					<view class="kgb">
						<!-- 加一条线 -->
						<u-line color="#5559691f"></u-line>
						<!-- 间隔槽 -->
						<u-gap height="30" bg-color=""></u-gap>					
						<u-button size="default" type="default">{{$t('bico.W380')}}</u-button>
						<u-gap height="45" bg-color=""></u-gap>
					</view>
				</view>
				<u-gap height="30" bg-color=""></u-gap>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		teManagementList,
		commonCarousel,
		teManagementOrderList0,
		teManagementOrderList1,
		knowTeManagementList,wallet,teManagementOrderAdd
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		data() {
			return {
				show: false,
				detail:{},
				usedTotal:0, // 剩余总量
				usedTotalR:0, // 完成进度
				price:'',//认购数量
				//列表数据
				dataList: [], //认购项目
				dataList2: [],//正在参与
				dataList3: [],//已经结束
				
				head: '../../static/RHB.png',
				list: [],
				lists: [{
					name: this.$t('bico.W381'),
					value: 'common/teManagementList'
				}, {
					name: this.$t('bico.W382'),
					value: 'teManagementOrderList0'
				}, {
					name: this.$t('bico.W383'),
					value: 'teManagementOrderList1'
				}],
				estimatedIncome:0, // 预计收益
				current: 0,
				myWallet:{
					usedPrice:0.00,
				}
			}

		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		watch:{
			price:function (newVal,oldVal) {
				this.estimatedIncome = newVal * this.detail.oddsWinning/100
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				//title: this.$t('bico.W384'),
				title:"Defi"
			})
			this.$utils.setTheme(this.theme);
			this.getListData()
			this.$utils.initData({
				url: commonCarousel,
				data: {
					type: "DEFI_TOP"
				},
				type: 'POST'
			}, (res, msg) => {
				this.list = res;
				
			})
		},
		
		methods: {
			submit(){
				var that =this
				
				if(!that.price || that.price < that.detail.minPrice){
					that.$utils.showLayer(this.$t('bico.W385'),);
					return
				}
				if( that.price > that.myWallet.usedPrice){
					that.$utils.showLayer(this.$t('bico.W386'),);
					return
				}
				// uni.showLoading()
				that.$utils.initDataToken({
					url: teManagementOrderAdd,
					type: 'post',
					data: {
						teManagementId: that.detail.id,
						amount:that.price
					}},res => {
						uni.hideLoading()
						that.$utils.showLayer(this.$t('bico.W387'),);
						this.show=false
					}
				);
				
			},
			
			
			allBuy(){
				this.price = this.usedTotal
			},
			showPopup(item){
				this.detail=item
				this.show = true
				this.getKnowData()
				this.getWallet()
			},
			getWallet() {
				var that = this
				var valuation="USDT"
				that.myWallet.type = that.detail.currency
				that.$utils.initDataToken({
						url: wallet,
						type: 'post',
						data: {
							valuation: valuation,
							hide: 'N',
							type: 'WALLET',
						}
					},
					res => {
						var l = res.list;
						for (var i = 0; i < l.length; i++) {
							if (l[i].type == that.detail.currency) {
								that.myWallet.usedPrice = Number(l[i].usedPrice).toFixed(4);
							}
						}
					}
				);
			},
			getKnowData(){
				var that = this
				//uni.showLoading()
				that.$utils.initDataToken({
						url: knowTeManagementList,
						type: 'post',
						data: {
							id: that.detail.id
						}
					},
					res => {
						this.usedTotal = this.detail.issuanceCount - res
						this.usedTotalR = res/this.detail.issuanceCount*100  
						
						
				
					}
				);
			},
			getListData() {
				var that = this
				// uni.showLoading()
				that.$utils.initDataToken({
						url: that.lists[that.current].value,
						type: 'post',
						data: {
							current: '1',
							size: '100'
						}
					},
					res => {
						// uni.hideLoading()
						if (that.current == 2) {
							that.dataList3 = res.records
						} else if(that.current == 1) {
							that.dataList2 = res.records
						}else{
							that.dataList = res.records
						}

					}
				);
			},
			change(index) {
				this.current = index;
				this.getListData()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {

		
		
		width: 100%;
		height: 100%;


		.wrap {
			padding: 0px;
			padding-top: 0vw;
			width: 100%;
			height: 60vw;
			background-color: #24254c;
			background-size: 100%;
			background-position: center center;
			border-radius: 0vw 0vw 0vw 0vw;
		}

		.avatar {
			width: 7vw;
			height: 7vw;
			border-radius: 50%;
			position: absolute;
			top: 0vw;
			right: 0;
			left: 14vw;
		}

		.wrapc {
			padding: 4vw;
		}

		.wrapcc {
			padding: 0vw 0;
			text-align: center;
			justify-content: space-around;
			border-radius: 4vw 4vw 0vw 0vw;
			background-color: #2e2f5a;


		}

		.u-row {
			margin: 0px 0;
		}

		.demo-layout {
			height: 80rpx;
			border-radius: 8rpx;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.bgtxt {
			position: relative;
			border: 0;
			display: inline-flex;
			overflow: visible;
			line-height: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			/*justify-content: center;*/
			cursor: pointer;

			z-index: 1;
			box-sizing: border-box;
			transition: all 0.15s;
			font-size: 14;
			height: 8vw;

			line-height: 8vw;
			font-weight: 6 00;
			font-size: 14px;
		}

		.bgtxtp {
			font-weight: 700;
			font-size: 14px;
		}

		.kgb {
			width: 92%;
			    margin: -2vw 4vw;
			    margin-top: 0vw;
		}

		.tool-card {
			background-color: #ffffff;
			/* padding: 10px 0px; */
			margin-top: 10px;
			border-radius: 1vw;
			width: 96%;
			margin: 0vw 2vw;
			border: 0.5px solid #7079ab24;
		}
		
		.bgtxtoP{
			text-align: right
			
		}
		.u-btn--primary {
		    color: #ffffff;
		    border-color: #424490;
		    background-color: #424490;
		}
		
		.u-mode-center-box {
		    
		    border-radius: 8px!important;
		}
		
		.bgtxtrt{
			
			   width: 110%;
			       margin: 2vw;
			
		}
		.amount {
			line-height: 1.8;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 10upx 0;
		
			.p {
				font-size: 12px;
				/*color: #0952C3;*/
				
				    padding-bottom: 0px;
				    /* color: #FF5722; */
				    font-weight: 700;
				
			}
		}
		.input {
			// line-height: 1.8;
			display: flex;
			flex-direction: row;
			// justify-content: space-between;
			padding: 4px 4px;
			    margin: 10px 8px 0px 8px;
			    border: 0.5px solid #b2b9deab;
			    border-radius: 3px;
		
			input {
				color: #0952C3;
				font-size: 25upx;
			}
		
			.cny {
				// line-height: 1.8;
				margin-right: 12upx;
				color: #0952C3;
			}
		
			.all {
				// line-height: 1.8;
				margin-left: 12upx;
				color: #0952C3;
			}
		}
		.popopview{
			    height: 130vw;
			    width: 90vw;
				
				uni-view {
				    box-sizing: border-box;
				    line-height: 1.8;
				}
				.input .cny {
				    margin-right: 25vw;
				    color: #0952C3;
				}
		}
		.uni-input {
		    height: 30px;
		    padding: 1px 12px;
		    line-height: 30px;
		    font-size: 14px;
		    background: #FFF;
		    flex: 1;
		}
		
	}
</style>
